<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>宝塔</legend>
        </fieldset>
        <div class="layui-form layuimini-form" lay-filter="fromBt">
            <div class="layui-form-item">
                <input type="text" hidden name="id"/>
                <input type="text" hidden name="serverId"/>
                <div class="layui-inline">
                    <label class="layui-form-label required">密钥</label>
                    <div class="layui-input-block">
                        <input type="text" name="btSign" lay-verify="required" lay-reqtext="密钥不能为空"
                               placeholder="请输入密钥"
                               value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label required">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="btUrl" lay-verify="required" lay-reqtext="地址不能为空"
                               placeholder="请输入地址"
                               value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">根目录</label>
                    <div class="layui-input-block">
                        <input type="text" name="rootDirectory" lay-verify="required" lay-reqtext="根目录不能为空"
                               placeholder="请输入根目录"
                               value="" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btTestBtn">宝塔测试连接</button>
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btSaveBtn">宝塔确认保存</button>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>SHELL</legend>
        </fieldset>

        <div class="layui-form layuimini-form" lay-filter="fromShell">
            <div class="layui-form-item">
                <input type="text" hidden name="id"/>
                <input type="text" hidden name="serviceId"/>
                <div class="layui-inline">
                    <label class="layui-form-label required">IP</label>
                    <div class="layui-input-block">
                        <input type="text" name="shellIp" lay-verify="required" disabled class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">端口号</label>
                    <div class="layui-input-block">
                        <input type="text" name="shellPort" lay-verify="required" lay-reqtext="端口号不能为空"
                               placeholder="请输入端口号"
                               value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label required">登录名</label>
                    <div class="layui-input-block">
                        <input type="text" name="shellName" lay-verify="required" lay-reqtext="登录名不能为空"
                               placeholder="请输入登录名"
                               value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label required">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="shellPassword" lay-verify="required" lay-reqtext="密码不能为空"
                               placeholder="请输入密码"
                               value="" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="shellTestBtn">shell测试连接</button>
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="shellSaveBtn">shell确认保存</button>
                </div>
            </div>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>站点</legend>
        </fieldset>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
            </div>
        </script>

        <table class="layui-hide" id="subCurrentTableId" lay-filter="subCurrentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'common', 'miniPage', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            common = layui.common
            , miniPage = layui.miniPage
            , laydate = layui.laydate;
        $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        var serverId = parent.serverId;
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        common.ajaxGet('/api/server/bt/detail/by/server?serverId=' + serverId, function (_data) {
                if (_data.resCode === '0000') {
                    form.val("fromBt", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "id": _data.data.id // "name": "value"
                        , "serverId": _data.data.serviceId
                        , "btSign": _data.data.btSign
                        , "btUrl": _data.data.btUrl
                        , "rootDirectory": _data.data.rootDirectory
                    });
                }
            }
        )
        form.on('submit(btTestBtn)', function (data) {
            var _data = form.val("fromBt");
            common.ajaxPost('/api/server/bt/test',
                JSON.stringify(_data)
                , function (_data) {
                    if (_data.resCode === '0000') {
                        layer.msg(_data.resDesc, {icon: 6});
                    } else {
                        layer.msg(_data.resDesc, {icon: 7});
                    }
                }
            )
            return false;
        });

        form.on('submit(btSaveBtn)', function (data) {
            var _data = form.val("fromBt");
            common.ajaxPost('/api/server/bt/edit',
                JSON.stringify(_data)
                , function (_data) {
                    if (_data.resCode === '0000') {
                        layer.msg(_data.resDesc, {icon: 6});
                    } else {
                        layer.msg(_data.resDesc, {icon: 7});
                    }
                }
            )
            return false;
        });


        common.ajaxGet('/api/server/shell/detail/by/server?serverId=' + serverId, function (_data) {
                if (_data.resCode === '0000') {
                    form.val("fromShell", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "id": _data.data.id // "name": "value"
                        , "serviceId": _data.data.serviceId
                        , "shellIp": _data.data.shellIp
                        , "shellPort": _data.data.shellPort
                        , "shellName": _data.data.shellName
                        , "shellPassword": _data.data.shellPassword
                    });
                }
            }
        )
        form.on('submit(shellTestBtn)', function (data) {
            var _data = form.val("fromShell");
            common.ajaxPost('/api/server/shell/test',
                JSON.stringify(_data)
                , function (_data) {
                    if (_data.resCode === '0000') {
                        layer.msg(_data.resDesc, {icon: 6});
                    } else {
                        layer.msg(_data.resDesc, {icon: 7});
                    }
                }
            )
            return false;
        });

        form.on('submit(shellSaveBtn)', function (data) {
            var _data = form.val("fromShell");
            common.ajaxPost('/api/server/shell/edit',
                JSON.stringify(_data)
                , function (_data) {
                    if (_data.resCode === '0000') {
                        layer.msg(_data.resDesc, {icon: 6});
                    } else {
                        layer.msg(_data.resDesc, {icon: 7});
                    }
                }
            )
            return false;
        });


        var whereData = {serverId: serverId}
        table.render({
            elem: '#subCurrentTableId',
            url: '/api/server/site/page/list?search=' + encodeURI(JSON.stringify(whereData)),
            data: JSON.stringify(whereData),
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'id', hide: true},
                    {field: 'siteDomain', width: 120, title: '站点域名'},
                    {field: 'siteDescribe', minWidth: 180, title: '站点目录'},
                    {field: 'sitePort', minWidth: 180, title: '站点端口号'},
                    {field: 'siteType', minWidth: 180, title: '站点类型'},
                    {field: 'siteStatus', minWidth: 180, title: '站点状态'},
                    {fixed: 'right', title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        table.on('toolbar(subCurrentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                var content = miniPage.getHrefContent('page/server/site-table.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '添加站点',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content

                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });

    });
</script>